<template>
	<view class="myform">
		<u--form :labelPosition="formAttr.labelPosition || 'left'"
			:labelWidth="formAttr.labelWidth || 50"
			:errorType="formAttr.errorType || 'message'"
			:labelAlign="formAttr.labelAlign || 'left'"
			:labelStyle="formAttr.labelStyle || {}"
			:model="model"
			:rules="rules"
			:ref="name"
		>
			<u-form-item v-for="(item, index) in formItems" :key="index"
					:label="item.leftIcon? '' : item.label"
					:labelPosition="item.labelPosition || 'left'"
					:labelWidth="item.labelWidth || 50"
					:prop="item.prop"
					:borderBottom="item.borderBottom"
					:ref="item.ref"
					:leftIcon="item.leftIcon"
					:rightIcon="item.rightIcon"
					:leftIconStyle="item.leftIconStyle || ''"
					:required="item.required || false"
			>
				<view class="flex">
					<u--input :placeholder="item.input.placeholder"
							v-model="model[item.prop]"
							@focus="KeyboardHeightChange()"
							border="none"
							:type="item.input.type || 'text'"
							:clearable="item.input.clearable || false"
							:password="item.input.password || false"
					></u--input>
					<image v-if="item.isValidate" 
						:src="formItems[2].validateSrc" 
						@click="$emit('validateChange')"
						class="validate"></image>
					<view v-if="item.hasBtn" :style="item.btn.style || {}"
						:class="item.btn.class || ''"
						@click="btnClick(item)"
					>
						{{item.btn.text}}
					</view>	
				</view>
			</u-form-item>
		</u--form>
		<view class="myform-btn position-relative center-horizontally">
			<slot>
				<u-button :type="btnAttr.primary" 
						:shape="btnAttr.shape"
						:throttleTime="btnAttr.throttleTime || 1000"
						@click="submit()"
						:color="btnAttr.color"
				>{{btnAttr.text}}</u-button>
			</slot>
		</view>	
	</view>
</template>

<script>	
	export default {
		name:"login-form",	
		props: {
			name: {
				type: String,
				required: true,
				default: 'myform'
			},
			formAttr: {
				type: Object,
				required: true,
				default: () => ({})
			},
			model: {
				type: Object,
				required: true,
				default: () => ({})
			},
			formItems: {
				type: Array,
				required: true,
				default: () => []
			},
			rules: {
				type: Object,
				required: true,
				default: () => ({})
			},
			btnAttr: {
				type: Object,
				required: true,
				default: () => ({})
			}
		},
		data() {
			return {
				
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs[this.name].setRules(this.rules);
		},
		mounted() {
			// 监听键盘事件开启
			this.KeyboardHeightChange();
		},
		onUnload() {
			// 页面销毁时取消监听改事件
			// #ifndef H5
			uni.offKeyboardHeightChange();
			// #endif
		},
		methods: {
			submit() {
				this.$refs[this.name].validate().then(res => {
					this.$emit("submit", this.model);
				}).catch(errors => {
					uni.$u.toast(this.btnAttr.text + "失败！");
				})
			},
			KeyboardHeightChange() {
				// 监听键盘高度变化
				// #ifndef H5
				uni.onKeyboardHeightChange(res => {
					this.$emit('keyboardChange', res);
				});
				// #endif
			},
			// 对于不同表单按钮区定制不同事件
			btnClick(value) {
				value.fn && value.fn();
			}
		}
	}
</script>

<style lang="scss" scoped>
.myform{
	.validate{
		width: 200rpx;
		height: 80rpx;
	}
	&-btn{
		margin-top: 40rpx;
		width: 400rpx;
		// position: relative;
		// left: 50%;
		// transform: translateX(-50%);
	}
}
</style>